<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
     <link rel="stylesheet" href="../css/detail.css">
</head>

<body>
    <div class="top_nav">
        <div class="top_nav_wrapper">
            <ul class="top_nav_l">
                <li><a href=""> <img src="../img/xingxing.png" alt="">收藏鲜花网(hua.com) </a></li>
                <li><a href=""><img src="../img/weixin.png" alt=""> 关注微信</a></li>
                <li><a href=""><img src="../img/hua.png" alt=""> 花礼网app</a></li>
            </ul>

            <ul class="top_nav_r">
                <li id="login"><a href="./login.html">登录</a></li>
                <li id="reg"><a href="./reg.html">注册</a></li>
                <li id="logout"><a href="#">注销</a></li>
                <li><a href="">订单查询</a></li>
                <li><a href="">客户服务</a></li>
                <li><a href="shoppingcart.html"> 购物车 <img src="../img/gouwuchekong.png" alt=""></a></li>
                <li>鲜花礼品网:国内领先鲜花网品牌</li>
            </ul>
        </div>

    </div>

    <div class="header_container">
        <div class="logo">
            <a href="home_page.html" class="logo_nav"></a>
        </div>
        <div class="search-box-group">
            <span class="search_img"></span>
            <input type="text" class="search_txt" placeholder="商品搜索">
            <button class="search_btn"> 搜索</button>
        </div>
        <ul class="searvice">
            <li class="searvice_phon"><span class="phon_img"></span><span>400-889-8188</span> </li>
            <li class="searvice_kefu"><span class="kefu_img"></span> <span>在线客服</span></li>
        </ul>
    </div>

    <div class="goods_detail">
      
    </div>

    <script src="../js/api.js"></script>
     <script src="../js/jquery.js"></script>

     <script>
          var login_username = localStorage.getItem('loginname');
              var id=queryString('id')
               goods_detail({id}).then(data=>{
                   
                   var {status,data}=data;
                    res='';
                   if(status){
                       res+=`
                       <div class="goods_preview">
            <div class="bigimg">
                <img src="${data.img}" alt="">
                <div class="slide"></div>
                <div class="right">
                    <div class="img_box"><img src="${data.img}" alt=""></div>
                    </div>
                </div>
            <ul class="goods_swiper">
                <li id='${data.img1}'><img src="${data.img1}" alt=""></li>
                <li id='${data.img2}'><img src="${data.img2}" alt=""></li>
                <li id='${data.img3}'><img src="${data.img3}" alt=""></li>
                <li id='${data.img4}'><img src="${data.img4}" alt=""></li>
            </ul>
        </div>
        <div class="goods_info">
            <div class="goods_info_area">
                <div class="title">
                    <p class="title_text">${data.goods_title}</p>
                </div>
                <div class="price">￥<span class="price_text">${data.price}</span></div>
                <div class="flower_words_msg">
                    <div>
                        <p class="flower_words_cotent"><span class="flower_words">花语</span>${data.flower_language}</p>
                    </div>
                    <div>
                        <p class="flower_words_cotent"><span
                                class="flower_words">材料</span>${data.materials}</p>
                    </div>
                    <div>
                        <p class="flower_words_cotent"><span class="flower_words">包裹</span>${data.pack}
                        </p>
                    </div>
                    <div class="dilivery">
                        <p class="flower_words_cotent"><span class="flower_words">配送说明</span>全国 </p>
                    </div>
                </div>
          

                <div class="buy_btn">
                        <a class="addcart" href='#'>
                              <img src="../img/jiarugouwuche.png" alt="">
                                加入购物车
                            </a>
                            <a href="" class="buy_now">
                                立即购买
                            </a>
                </div>
                
            </div>
        </div>`;
                  
       
         $('.goods_detail').html(res)

          //设置放大镜
         // //阴影的宽高
         w = $('.slide').width();
        h = $('.slide').height();
    //鼠标移入时滑块显示
    $('.bigimg').on('mousemove',function(e){
            $('.slide').css('display','block');
            $('.right').css('display','block');
                e = e || event;
        target = e.target || e.srcElement;
            x=e.offsetX-w/2;
            y=e.offsetY-h/2;
            maxwidth=$('.bigimg').width()-$('.slide').height();
            maxheight=$('.bigimg').height()-$('.slide').height();
            
        //   边界判定
        if (x < 0)
            x = 0;
        if (y < 0)
            y = 0;
        if (x > maxwidth)
            x = maxwidth;
        if (y > maxheight)
            y = maxheight;
                //设置放大比例
        scale = ($('.right img').width() - $('.right').width()) / maxwidth;
         
        $('.slide').css({'top':`${y}px`,'left':`${x}px`}) ;
        $('.right img').css({'top':`${-y*scale}px`,'left':`${-x*scale}px`});
       
    })
    //鼠标移出时滑块隐藏
    $('.bigimg').on('mouseout',function(){
            $('.slide').css('display','none');
            $('.right').css('display','none');
    })
    }
    $('.goods_swiper li').hover(function(){
            console.log($(this).attr('id'));
            $('.bigimg img').attr('src',`${$(this).attr('id')}`)
        })    

     //加入购物车事件
    $('body').on('click','.addcart',function(){
       
       if(login_username){
           var username=login_username;
           var goods_id=id;
           var num=1;
           addCart({username,
           goods_id,
           num}).then(data=>{
               console.log(data);
               if(data.status){
                   alert(data.msg);
                  
               }
           })
       } 
       else{
           alert('请先登录');
           $('.addcart').attr('href',`login.html?id=${id}`)
       }        
    })
     
               })
      //是否登录判定来显示用户名  
        if(login_username){
                $('#login').html(`<p >欢迎：${login_username}</p>`)
        }   
           
            //注销按钮用来退出用户
    $('body').on('click','#logout',function(){
        if(login_username){
            localStorage.removeItem('loginname');
            $('#login').html(`<a href="./login.html">登录</a>`)
        }
    })
     </script>
</body>

</html>